<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>checkoutPage</title>
    <link rel="stylesheet" href="./css/checkoutpage.min.css" />
  </head>
  <body>
    <div class="warp">
      <!-- 页面标题 -->
      <div class="title">填写订单</div>
      <div class="first-block">
        <!-- 填写收货信息 -->
        <div class="information">
          <div class="left">收货信息</div>
          <div class="right">请选择收货信息</div>
        </div>
        <!-- 填写送达日期 -->
        <div class="data">
          <div class="left">送达日期</div>
          <div class="right">请填写送达日期</div>
        </div>
        <!-- 选择送达时间 -->
        <div class="time">
          <div class="left">配送时间</div>
          <div class="right">不限时段</div>
        </div>
        <!-- 选择配送方式 -->
        <div class="manner">
          <div class="left">配送方式</div>
          <div class="right">市区免费配送</div>
        </div>
        <div class="icon">
          <div class="item"></div>
          <div class="item1"></div>
          <div class="item"></div>
          <div class="item1"></div>
          <div class="item"></div>
          <div class="item1"></div>
          <div class="item"></div>
          <div class="item1"></div>
          <div class="item"></div>
          <div class="item1"></div>
          <div class="item"></div>
          <div class="item1"></div>
          <div class="item"></div>
          <div class="item1"></div>
          <div class="item"></div>
        </div>
      </div>
      <div class="second-block">
        <!-- 填写订购人信息 -->
        <div class="mess">
          <div class="left">订购人信息</div>
          <div class="right">请填写</div>
        </div>
        <!-- 贺卡留言 -->
        <div class="message">
          <div class="greeting-card">贺卡留言</div>
          <div class="gree-write">
            <div class="detail">选填 请输入贺卡留言!</div>
          </div>
          <!-- 买家留言 -->
          <div class="buyers">买家留言</div>
          <div class="buyers-write">
            <div class="detail">选填 请输入买家留言!</div>
          </div>
        </div>
      </div>
      <!-- 商品 -->
      <div class="third-block">
        <div class="content">
          <div class="photo">
            <img src="./imgs/鲜花.png" alt="" />
          </div>
          <div class="name">
            <div class="top">永恒回忆</div>
            <div class="bottom">×1</div>
          </div>
          <div class="price">￥399</div>
        </div>
      </div>
      <!-- 选择支付方式 -->
      <div class="fourth-block">
        <div class="pay">支付方式</div>
        <div class="wx">
          <div class="photo">
            <img src="./imgs/微信.png" alt="" />
          </div>
          <div class="write">微信</div>
        </div>
        <div class="zfb">
          <div class="photo">
            <img src="./imgs/支付宝.png" alt="" />
          </div>
          <div class="write">支付宝</div>
        </div>
      </div>
      <!-- 发票 -->
      <div class="fifth-block">
        <div class="left">发票</div>
        <div class="right">选填</div>
      </div>
      <!-- 优惠 -->
      <div class="compute">
        <div class="top">
          <div class="one">共一件商品</div>
          <div class="two">优惠:-￥0</div>
        </div>
        <!-- 商品最终价格 -->
        <div class="bottom">
          <div class="three">运费:￥0</div>
          <div class="four">商品总价:</div>
          <div class="five">￥329.00</div>
        </div>
      </div>
      <!-- 付款 -->
      <div class="last">
        <div class="left">
            <div class="ch">实付款:￥</div>
            <div class="num">329.00</div>
        </div>
        <div class="right">提交订单</div>
      </div>
    </div>
  </body>
</html>
